<!--
 * @Author: luoqi
 * @Date: 2022-04-30 22:04:42
 * @LastEditors: luoqi
 * @LastEditTime: 2022-05-11 22:10:59
 * @Description: 
-->
<template>
  <!-- 收藏历史记录 -->
  <el-row class="Ctogether">
    <el-col :span="24">
      <p>通知列表</p>
      <el-row>
        <!-- 新消息 -->
        <el-col :span="24">
          <el-row
            class="gugug"
            v-for="(item, index) in historyData1"
            :key="index"
          >
            <el-col :span="14">
              <el-row>
                <el-col :span="3">
                  <router-link
                    :to="{
                      path: '/main/herhome/myall',
                      query: { id: item.id },
                    }"
                  >
                    <el-avatar
                      size="large"
                      :src="item.createHeadImg"
                    ></el-avatar>
                  </router-link>
                </el-col>
                <el-col :span="15" class="fans-title">
                  <div>
                    {{ item.createName }}
                    <el-tag type="danger" class="new-tag" effect="dark">
                      NEW</el-tag
                    >
                  </div>
                  <div>
                    <h5>{{ item.title }}</h5>
                  </div>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="6">
              <h5 class="time-box">{{ item.createTime | getStandardDate }}</h5>
            </el-col>
            <el-col :span="3" class="del">
              <el-tag
                type="danger"
                style="color: #e8471a; fontweight: bold"
                effect="plain"
                @click.native="delNoti(item.id, 1)"
              >
                删除</el-tag
              >
            </el-col>
          </el-row>
        </el-col>
        <!-- 旧消息 -->
        <el-col :span="24">
          <el-row
            class="gugug"
            v-for="(item, index) in historyData"
            :key="index"
          >
            <el-col :span="14">
              <el-row>
                <el-col :span="3">
                  <router-link
                    :to="{
                      path: '/main/herhome/myall',
                      query: { id: item.id },
                    }"
                  >
                    <el-avatar
                      size="large"
                      :src="item.createHeadImg"
                    ></el-avatar>
                  </router-link>
                </el-col>
                <el-col :span="15" class="fans-title">
                  <div>{{ item.createName }}</div>
                  <div>
                    <h5>{{ item.title }}</h5>
                  </div>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="6">
              <h5 class="time-box">{{ item.createTime | getStandardDate }}</h5>
            </el-col>
            <el-col :span="3" class="del">
              <el-tag
                type="danger"
                style="color: #e8471a; fontweight: bold"
                effect="plain"
                @click.native="delNoti(item.id, 0)"
              >
                删除</el-tag
              >
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
</template>

<script>
export default {
  props: ["collection", "collection1", "id"],
  data() {
    return {
      //收藏历史记录数据
      historyData: [],
      historyData1: [],
    };
  },
  filters: {
    getStandardDate(time) {
      var date = new Date(time); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var Y = date.getFullYear() + "-";
      var M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      var D = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      var h =
        (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
      var m =
        (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
        ":";
      var s =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      return Y + M + D + " " + h + m + s; //时分秒可以根据自己的需求加上
    },
  },
  methods: {
    readAll() {
      //对新的消息生成id字符串
      this.$axios({
        method: "post",
        url: "/message/markRead",
      }).then((res) => {
        console.log(res);
        if (res.code != "200") {
          this.$message.error(res.msg);
        } else {
        }
      });
    },
    delNoti(id, num) {
      this.$axios({
        method: "post",
        url: "/message/delete",
        data: this.$qs.stringify({
          ids: id.toString(),
        }),
      }).then((res) => {
        console.log(res);
        if (res.code != "200") {
          this.$message.error(res.msg);
        } else {
          this.$message.success("删除成功");
          if (num == 1) {
            this.historyData1 = this.historyData1.filter((item) => {
              return item.id != id;
            });
          } else {
            this.historyData = this.historyData.filter((item) => {
              return item.id != id;
            });
          }
        }
      });
    },
  },
  created() {
    this.historyData = this.collection;
    this.historyData1 = this.collection1;
    this.readAll();
  },
};
</script>

<style lang="less" scoped>
@import url("../../less/myhome.less");
.fans-title {
  font-size: 18px;
  font-weight: bold;
  span {
    font-size: 12px !important;
    color: #aaa;
    display: inline-block;
    margin-left: 10px;
    font-weight: 400;
  }
  h5 {
    font-weight: 400;
  }
}
.gugug {
  padding: 10px 0;
  border-bottom: 1px #e6e6e6 solid;
  &:hover > .del {
    opacity: 1;
  }
  .del {
    opacity: 1;
  }
  .time-box {
    font-size: 14px;
    font-weight: 400;
    color: #aaa !important;
  }
  .new-tag {
    transform: scale(0.9);
    color: #fff;
    width: 50px;
    height: 25px;
    padding: 0 10px;
    line-height: 25px;
    background-color: #f22;
  }
}
</style>